<template>
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <li v-for="item in todoArr" :key="item.id" :class="{completed:item.completed}">
                <div class="view">
                    <input @click="toggole(item)" class="toggle" type="checkbox">
                    <label>{{item.title}}</label>
                    <button @click="del(item.id)" class="destroy"></button>
                </div>
                <input class="edit">
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props:{
        todoArr:{
            type:Array,
            default(){
                return []
            }
        }
    },
    methods:{
        toggole(item){
            this.$emit("complete",item);
        },
        del(index){
            this.$emit("del",index);
        }
    }
}
</script>

<style>

</style>